<template>
	<view>
		<view class="top-wrap">
			<view class="top-row flex-cc">
				<view class="text flex-ac" @click="handleClick">
					<view class="name">{{ model.store.storeName }}</view>
					<up-icon name="arrow-down-fill" color="#B98A73" size="10"></up-icon>
				</view>
			</view>
		</view>
		<view class="goods-list">
			<template v-for="item in list" v-if="list.length">
				<view class="goods-item" v-if="item.periodType">
					<view class="title">{{ item.periodName }}</view>
					<view class="flex-jc">
						<view>
							<view>日期:{{ item.startDate }} ~ {{ item.endDate }}</view>
						</view>
						<up-button type="primary" color="#986C5D" shape="circle" plain text="详情"
							@click="toDetail(item, 'assign')"></up-button>
					</view>
				</view>
				<view v-else class="goods-item">
					<view class="title">基础价格</view>
					<view class="flex-jc mt20">
						<view>
							<view>平日：{{ common.formatStr(item.period, '0') }}</view>
							<view>周末：{{ common.formatStr(item.period, '1') }}</view>
						</view>
						<up-button type="primary" color="#986C5D" shape="circle" plain text="详情"
							@click="toDetail(item, 'common')"></up-button>
					</view>
				</view>
			</template>
			<view v-else>
				<up-empty mode="list" icon="list" marginTop="100px" text="暂无数据"></up-empty>
			</view>
		</view>
		<up-button type="primary" :hairline="false" color="#B98A73" style="width: 95%;" shape="circle" text="新增区间"
			@click="addRangePrice"></up-button>
		<CustomPopup :list="model.storeList" :pro="{ key: 'storeName', value: 'uuid' }" title="门店" ref="storePopupRef"
			@select="handleSelectStore"></CustomPopup>
		<AddRange ref="addRangeRef"></AddRange>
	</view>
</template>

<script setup>
import {
	reactive,
	ref
} from 'vue';
import { postRequest } from "@/reuqest/request.js";
import CustomPopup from "@/components/custom-popup/index.vue";
import { onLoad, } from "@dcloudio/uni-app";
import AddRange from "@/components/addRange/index.vue"
import common from "@/utils/common.js";

const storePopupRef = ref(null)
const addRangeRef = ref(null)

const weekMap = new Map([
	[0, '周一'],
	[1, '周二'],
	[2, '周三'],
	[3, '周四'],
	[4, '周五'],
	[5, '周六'],
	[6, '周天']
])

const model = reactive({
	showStorePopup: false,
	showAddRange: false,
	store: {},
	model: { modelName: "全部车型", modelUuid: "" },
	storeList: [],
	modelList: [],
	pageNum: 1,
	total: 0,
})

const list = ref([])

const toDetail = (item) => {
	uni.navigateTo({
		url: `/pages/priceManage/rangePriceDetaile?storeUuid=${model.store.uuid}&uuid=${item.uuid}`
	})
}

const addRangePrice = () => {
	addRangeRef.value?.open()
}

const handleSelectStore = (item) => {
	model.store = item
	getData()
}


const handleClick = () => {
	storePopupRef.value?.open()
}

const getStore = (storeUuid) => {
	postRequest("/wx-operation/api/v1/bm/store/page", {
		pageNum: 1,
		pageSize: 2000,
	}).then(res => {
		if (res.bizCode === "00000") {
			model.storeList = res.data?.list || [];
			if (storeUuid) {
				model.store = model.storeList.find(item => item.uuid === storeUuid) || {};
			} else {
				model.store = model.storeList[0] || {};
			}
			getData()
		}
	})
}


const getData = () => {
	postRequest("/wx-operation/api/v1/bm/rental/price/config/getPriceConfig", {
		storeUuid: model.store.uuid,
	}).then(res => {
		if (res.bizCode === "00000") {
			list.value = [res.data.commonPeriodConfig, ...res.data.assignPeriodConfigList];
		}
	})
}

onLoad((options) => {
	if (options && options.storeUuid) {
		getStore(options.storeUuid)
	}
})
</script>

<style lang="less" scoped>
.top-wrap {
	background: #fff;

	.top-row {
		position: relative;
		padding: 15rpx 30rpx;
		border-bottom: 2rpx solid #D9D9D9;
		font-size: 20rpx;
		color: #525252;
		font-weight: 400;
		line-height: 50rpx;

		.text {
			width: 24%;
			font-size: 24rpx;
			font-weight: 500;
			color: #000;

			.name {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 95%;
			}

			&:nth-child(1) {
				color: #B98A73;
			}
		}
	}
}

.goods-list {
	height: calc(100vh - 200rpx);
	overflow-y: scroll;
	background: #fff;
	box-sizing: border-box;
	position: relative;
	padding: 20rpx;

	.goods-item {
		border-radius: 20rpx;
		font-size: 20rpx;
		box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.06);
		padding: 20rpx;
		margin-bottom: 20rpx;

		&>view {
			line-height: 34rpx;
		}

		.title {
			font-size: 24rpx;
			font-weight: bold;
		}

		button {
			margin: 0rpx;
			width: 160rpx;
			height: 32px;
		}
	}
}
</style>